<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>排课信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../static/css/font.css">
    <link rel="stylesheet" href="../../static/css/weadmin.css">
    <script src="../../lib/layui/layui.js" charset="utf-8"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="../../static/js/jquery-1.11.1.min.js"></script>
    <script src="../../static/js/common.js" charset="utf-8"></script>
</head>

<body>
<div class="weadmin-nav">
			<span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">课程管理</a>
        <a><cite>排课信息</cite></a>
      </span>
    <a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="weadmin-body">
    <div class="layui-row" id="search">
        <form class="layui-form layui-col-md12 we-search">

            <div class="layui-inline">
                <input type="text" name="username" placeholder="请输入关键字" autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>
    <div class="weadmin-block">
        <button class="layui-btn" onclick="WeAdminShow('添加选课信息','./add.html')"><i class="layui-icon"></i>添加选课信息</button>
    </div>

    <table class="layui-hide" id="scheduleList" lay-filter="schedulebar"></table>
    <script type="text/html" id="scheduleOpBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <div id="editForm" style="display: none;">
        <form class="layui-form">
            <div class="layui-form-item" pane>
                <label  class="layui-form-label">
                    <span for="course" class="we-red">*</span>选择课程
                </label>
                <div class="layui-input-inline">
                    <select id="course" name="course" lay-verify="required" lay-filter="department" >

                    </select>
                </div>
            </div>

            <div class="layui-form-item" pane>
                <label  class="layui-form-label">
                    <span for="teacher" class="we-red">*</span>授课教师
                </label>
                <div class="layui-input-inline">
                    <select id="teacher" name="teacher" lay-verify="required" lay-filter="department" >

                    </select>
                </div>
            </div>
            <div class="layui-form-item" id="locationAndtimeBT">
                <label  class="layui-form-label">
                    时间地点
                </label>
                <div class="layui-btn-group">
                    <input type="button" class="layui-btn layui-btn-sm" id="addLT" value="增加"/>
                    <input type="button" class="layui-btn layui-btn-sm" id="delLT" value="删除"/>
                </div>
            </div>

            <div class="layui-form-item layui-form-hide" id="locationAndtime0">

            </div>

        </form>
    </div>

</div>
<script>
    layui.extend({
        admin: '{/}../../static/js/admin'
    });

    layui.use(['table', 'jquery','form', 'admin'], function() {
        var table = layui.table,
            $ = layui.jquery,
            form = layui.form,
            admin = layui.admin;
        $.ajax({
            url: "http://localhost:9001/schedule",
            type: "GET",
            contentType: "application/json;charset=utf-8",
            success: function (json) {
                if (json.result == "") {
                    json.result = {};
                } else {
                    table.render({
                        elem: '#scheduleList',
                        cellMinWidth: 80,
                        cols: [
                            [ {
                                field: 'id',title: '选课编码',width:100
                            },{
                                field: 'name',title: '课程名称', templet: function (res) {
                                    return  res.course.courseName ;
                                }
                            },{
                                field: 'courseScore',title: '课程学分',templet: function (res) {
                                    return   res.course.courseScore ;
                                }
                            },{
                                field: 'username',title: '授课教师',templet: function (res) {
                                    return   res.teacher.user.username ;
                                }
                            },{
                                field: 'location',title: '授课地点',templet: function (res) {
                                    var locations = res.location.split("@");
                                    var loc = '';
                                    for(i=1;i<locations.length;i++){
                                        loc = loc+"["
                                        loc = loc+locations[i];
                                        loc = loc+"]";
                                        loc = loc+"\n";
                                    }
                                    return loc ;
                                }
                            },{
                                field: 'time',title: '上课时间',templet: function (res) {
                                    var times = res.time.split("@");
                                    var tim = '';
                                    for(i=1;i<times.length;i++){
                                        tim = tim+"["
                                        tim = tim+times[i];
                                        tim = tim+"]";
                                        tim = tim+"\n";
                                    }
                                    return tim ;
                                }
                            },{
                                field: 'chooseNumber',title: '规定人数',width:100, templet: function (res) {
                                    return '<em>' + res.course.chooseNumber + '</em>'
                                }
                            },{
                                fixed:'right',field: 'operate',title: '操作',align:'center',toolbar: '#scheduleOpBar',width:200
                            }]
                        ],
                        data: json.result,
                        event: true,
                        page: true
                    });

                    //监听工具条
                    table.on('tool(schedulebar)', function(obj){
                        var data = obj.data;
                        if(obj.event === 'detail'){

                            layer.msg('ID：'+ data.id + ' 的查看操作');

                        } else if(obj.event === 'del'){
                            layer.confirm('真的删除行么', function(index){
                                $.ajax({
                                    url: "http://localhost:9001/schedule/"+data.id,
                                    type: "DELETE",
                                    contentType: "application/json;charset=utf-8",
                                    success: function (json) {
                                        obj.del();
                                        layer.close(index);
                                        layer.alert("删除成功")
                                    }
                                });



                            });
                        } else if(obj.event === 'edit'){
                            layer.open({
                                type: 1,
                                fix: false, //不固定
                                maxmin: true,
                                shadeClose: true,
                                area: [600 + 'px', 500 + 'px'],
                                shade: 0.4,
                                title: "编辑",
                                content: $('#editForm'),
                                success: function () {
                                    //加载课程信息
                                    $.ajax({
                                        url: "http://localhost:9001/course",
                                        type: 'get',//method请求方式，get或者post
                                        dataType: 'json',//预期服务器返回的数据类型
                                        contentType: "application/json; charset=utf-8",
                                        async: false,
                                        success: function (res) {//res为相应体,function为回调函数
                                            var result = res.result;
                                            var i = 0;
                                            var op = "";
                                            $('#course').append('<option value="">请选择</option>');
                                            for (i; i < result.length; i++) {
                                                op += '<option value=' + result[i].id + '>' + result[i].courseName + '</option>';
                                            }
                                            $('#course').append(op);
                                            $('#course').find('option[value=' + data.course.id + ']').attr("selected", true);
                                            form.render();
                                        }
                                    });

                                    //加载教师信息
                                    $.ajax({
                                        url: "http://localhost:9001/teacher",
                                        type: 'get',//method请求方式，get或者post
                                        dataType: 'json',//预期服务器返回的数据类型
                                        contentType: "application/json; charset=utf-8",
                                        async: false,
                                        success: function (res) {//res为相应体,function为回调函数
                                            var result = res.result;
                                            var i = 0;
                                            var op = "";
                                            $('#teacher').append('<option value="">请选择</option>');
                                            for (i; i < result.length; i++) {
                                                op += '<option value=' + result[i].id + '>' + result[i].user.username + '</option>';
                                            }
                                            $('#teacher').append(op);
                                            $('#teacher').find('option[value=' + data.teacher.id + ']').attr("selected", true);
                                            form.render();
                                        }

                                    });
                                    var locations = data.location.split("@");
                                    var times = data.time.split("@");
                                    var locationChoose = "";
                                    var timeChoose = "";
                                    for(var lTNumber=0,i=1;lTNumber<locations.length-1;lTNumber++,i++) {
                                        var addflag = '#locationAndtime' + lTNumber;
                                        locationChoose = "<option value="+locations[i]+">"+locations[i]+"</option>";
                                        timeChoose = "<option value="+times[i]+">"+times[i]+"</option>";
                                        $(addflag).after(
                                            '<div class="layui-form-item layui-form-text" id="locationAndtime' + (lTNumber+1) + '">'
                                            + '<label  class="layui-form-label"></label>'
                                            + '<div class="layui-input-inline">'
                                            + '<select id="location' + (lTNumber+1) + '" name="" lay-verify="required" lay-filter="">' + locationChoose + '</select>'
                                            + '</div>'
                                            + '<div class="layui-input-inline"></div>'
                                            + '<div class="layui-input-inline">'
                                            + '<select id="time' + (lTNumber+1) + '" name="" lay-verify="required" lay-filter="" >' + timeChoose + '</select>'
                                            + '</div>'
                                            + '</div>'
                                        );
                                    }
                                    form.render();
                                },
                                end:function () {
                                    var delflag;
                                    for(var i=1;i<=10;i++){
                                        delflag = '#locationAndtime'+i;
                                        $(delflag).remove();
                                    }
                                }
                            })

                        }
                    });
                }
            }
        });
        /*
         *数据表格中form表单元素是动态插入,所以需要更新渲染下
         * http://www.layui.com/doc/modules/form.html#render
         * */
        $(function(){
            form.render();
        });
    });

</script>
</body>

</html>